<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>国际酒店</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Stylesheets -->
	<!-- Dropdown Menu -->
	<link rel="stylesheet" href="css/superfish.css">
	<!-- Owl Slider -->
	<!-- <link rel="stylesheet" href="css/owl.carousel.css"> -->
	<!-- <link rel="stylesheet" href="css/owl.theme.default.min.css"> -->
	<!-- Date Picker -->
	<link rel="stylesheet" href="css/bootstrap-datepicker.min.css">
	<!-- CS Select -->
	<link rel="stylesheet" href="css/cs-select.css">
	<link rel="stylesheet" href="css/cs-skin-border.css">

	<!-- Themify Icons -->
	<link rel="stylesheet" href="css/themify-icons.css">
	<!-- Flat Icon -->
	<link rel="stylesheet" href="css/flaticon.css">
	<!-- Icomoon -->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Flexslider  -->
	<link rel="stylesheet" href="css/flexslider.css">
	
	<!-- Style -->
	<link rel="stylesheet" href="css/style.css">

	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->
	<style>
		.ball {
        background-color: #e5e3e4;
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        font-size: 20px;
        position: relative;
        cursor:pointer;
        z-index:100;
    }
    .ball .title{
        margin-top:28px;
        color:#333333;
        font-weight:600;
    }
        .ball .money {
            margin-top: 10px;
            color: #d71122;
            font-weight: 600;
        }
    .box {
        width:120px;
        overflow:hidden;
        text-align: center;
        padding: 1em 0.5em;
        border-radius: 5px;
        float:left;
        height: 120px;
        border: 1px solid #999999;
        margin:0 1em;
        color: #333333;
        display: inline-block;
        opacity: 0;
        -webkit-transition: opacity 0.4s ease-in-out;
        -moz-transition: opacity 0.4s ease-in-out;
        -o-transition: opacity 0.4s ease-in-out;
        transition: opacity 0.4s ease-in-out;
        z-index:100;
    }

    hide {
       display:none;
    }
    .active {
        opacity: 1;
    }

    .lock {
        opacity: 1;
    }
    .box .small {
        color: #666666;
        font-size: 0.8em;
        text-decoration: underline;
        cursor: pointer;
    }
        .box .title{
            color:#333333;
            font-weight:600;
            margin-bottom:0.5em;
        }
    .bigger {
        width: 150px;
    }
    .biggest{
        width:300px;
    }
    .mainTitle {
        width: 100%;
        text-align: center;
        position: relative;
        height: auto;
    }
    .mainTitle .imgBlock {
        display: inline-block;
        position: relative;
        top: -8px;
    }
    .mainTitle .mainBlock {
        display: inline-block;
        color: #1a1a1a;
        font-size: 36px;
        line-height:40px;
        font-weight: 600;
        margin: 0;
        letter-spacing:0.5em;
        text-indent:0.5em;
    }
     .subTitle {
        margin-top:18px;
        color: #333333;
        font-size:16px;
        line-height:1.5em;
    }
    .privilegeTb{
        margin-bottom:50px;
        width:90%;
        margin:auto;
    }
        .privilegeTb thead tr {
            font-size: 18px;
            color: #333333;
            text-align: left;
            line-height: 50px;
        }
    .privilegeTb tbody{
        color:#333333;
        font-size:16px;
        text-align:left;
        line-height:40px;
    }
    .privilegeTb tbody img {
        position:absolute;
        top:9px;
        left:-30px;
    }
    .privilegeTb tbody tr {
        border-bottom: 1px dotted #cccccc;
    }
    .privilegeTb tbody tr td{
        position:relative;
    }
    .privilegeTb tbody tr td:last-child {
        width:150px;
    }
    .privilegeTb tbody tr:last-child {
    border-bottom:none;
    }
    .privilegeTb td:first-child{
        font-weight:600;
        text-indent:-10px;
    }
    .privilegeTb span{
        font-size:1.2em;
    }
    span{
    	color:#CD1322;
    }
	</style>

</head>
<body>
	<div id="fh5co-wrapper">
	<div id="fh5co-page">
	<div id="fh5co-header">
		<header id="fh5co-header-section">
			<div class="container">
				<div id="nav-header">
					<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
					<h1 id="fh5co-logo"><a href="${pageContext.request.contextPath}/RoomServlet/listType">hotel</a></h1>
					<nav id="fh5co-menu-wrap" role="navigation">
						<ul class="sf-menu" id="fh5co-primary-menu">
							<li><a  href="${pageContext.request.contextPath}/RoomServlet/listType">网站首页</a></li>
							<li><a href="room.jsp">房间介绍</a></li>
							<li><a href="services.jsp">服务介绍</a></li>
							<li><a class="active" href="blog.jsp">新闻中心</a></li>
							<li><a href="contact.jsp">联系我们</a></li>
							<li><a href="userlist.jsp">个人中心</a></li>
						</ul>
					</nav>
				</div>
			</div>
		</header>
		
	</div>
	<!-- end:fh5co-header -->
	<div class="fh5co-parallax" style="background-image: url(images/slider1.jpg);" data-stellar-background-ratio="0.5">
		<div class="overlay"></div>
		<div class="container">
			<div class="row">
				<div class="col-md-12 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 text-center fh5co-table">
					<div class="fh5co-intro fh5co-table-cell">
						<h1 class="text-center">新闻中心</h1>
						<p>关注我们的新闻，了解最新活动和优惠</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="news-content container">
		<h2>加入会员</h2>
		<p class="news-time"><i class="icon icon-calendar"></i>2018/6/21</p>
		<img src="images/image-4.jpg"/>
		<div style="width:100%">
                <table class="privilegeTb">
                    <thead>
                        <tr>
                            <th></th>
                            <th style="font-weight: 600;">数字卡</th>
                            <th style="font-weight: 600;">贵宾卡</th>
                            <th style="font-weight: 600;">贝壳卡</th>
                            <th style="font-weight: 600;">金卡</th>
                            <th style="font-weight: 600;">铂金卡</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><img src="../../../Content/Join/adment/img/privi_1.png" />&nbsp;&nbsp;享受折扣</td>
                            <td><span>9.5</span>折</td>
                            <td><span>9.2</span>折</td>
                            <td>-</td>
                            <td><span>8.8</span>折</td>
                            <td><span>8.5</span>折</td>
                        </tr>
                        <tr>
                            <td><img src="../../../Content/Join/adment/img/privi_2.png" />&nbsp;&nbsp;积分翻倍</td>
                            <td><span>1</span>倍</td>
                            <td><span>2</span>倍</td>
                            <td><span>12</span>倍</td>
                            <td><span>2.5</span>倍</td>
                            <td><span>3</span>倍</td>
                        </tr>
                        <tr>
                            <td><img src="../../../Content/Join/adment/img/privi_3.png" />&nbsp;&nbsp;预订保留</td>
                            <td>18：00</td>
                            <td>18：00</td>
                            <td>20：00</td>
                            <td>19：00</td>
                            <td>20：00</td>
                        </tr>
                        <tr>
                            <td><img src="../../../Content/Join/adment/img/privi_4.png" />&nbsp;&nbsp;延时退房</td>
                            <td>13：00</td>
                            <td>13：00</td>
                            <td>14：00</td>
                            <td>14：00</td>
                            <td>14：00</td>
                        </tr>
                        <tr>
                            <td><img src="../../../Content/Join/adment/img/privi_5.png" />&nbsp;&nbsp;特惠房预订</td>
                            <td>仅1次</td>
                            <td>每月1次</td>
                            <td>每月1次</td>
                            <td>每月1次</td>
                            <td>每月2次</td>
                        </tr>
                        <tr>
                            <td><img src="../../../Content/Join/adment/img/privi_6.png" />&nbsp;&nbsp;生日礼遇</td>
                            <td><span>￥10</span>代金券+礼包</td>
                            <td><span>￥20</span>代金券+礼包</td>
                            <td><span>￥30</span>代金券+礼包</td>
                            <td><span>￥30</span>代金券+礼包</td>
                            <td><span>￥50</span>代金券+礼包</td>
                        </tr>
                        <tr>
                            <td><img src="../../../Content/Join/adment/img/privi_7.png" />&nbsp;&nbsp;同行客人特权</td>
                            <td>-</td>
                            <td>同行客人同享特权</td>
                            <td>同行客人同享特权</td>
                            <td>同行客人同享特权</td>
                            <td>同行客人同享特权</td>
                        </tr>
                        <tr>
                            <td><img src="../../../Content/Join/adment/img/privi_8.png" />&nbsp;&nbsp;免押金闪退</td>
                            <td>-</td>
                            <td>-</td>
                            <td>√</td>
                            <td>√</td>
                            <td>√</td>
                        </tr>
                        <tr>
                            <td><img src="../../../Content/Join/adment/img/privi_9.png" />&nbsp;&nbsp;专属服务</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>专属商务服务</td>
                        </tr>
                    </tbody>
                </table>
            </div>
		
	</div>
	<footer id="footer" class="fh5co-bg-color">
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div class="copyright">
						<p>&copy; 2018  All Rights Reserved. 
						</p>
						<img src="images/gw.jpg" />
					</div>
				</div>
				<div class="col-md-8">
					<div class="row">
						<div class="col-md-3">
							<h3>快速链接</h3>
							<ul class="link">
								<li><a href="${pageContext.request.contextPath}/RoomServlet/listType">网站首页</a></li>
								<li><a href="#">房间介绍</a></li>
								<li><a href="#">服务介绍</a></li>
								<li><a href="#">新闻中心</a></li>
								<li><a href="#">联系我们</a></li>
								<li><a href="userlist.jsp">个人中心</a></li>
							</ul>
						</div>
						<div class="col-md-3">
							<h3>特色服务</h3>
							<ul class="link">
								<li><a>餐厅、酒吧</a></li>
								<li><a>接送、泳池</a></li>
								<li><a>Spa、健身</a></li>
							</ul>
						</div>
						<div class="col-md-6">
							<h3>订阅</h3>
							<p>
								特色服务和齐全的设施等着你的到来
							</p>
							<form action="#" id="form-subscribe">
								<div class="form-field">
									<input type="email" placeholder="邮箱" id="email">
									<input type="submit" id="submit" value="发送">
								</div>
							</form>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</footer>

	</div>
	<!-- END fh5co-page -->
	
	</div>
	<!-- END fh5co-wrapper -->
	
	<!-- Javascripts -->
	<script src="js/jquery-2.1.4.min.js"></script>
	<!-- Dropdown Menu -->
	<script src="js/hoverIntent.js"></script>
	<script src="js/superfish.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- Counters -->
	<script src="js/jquery.countTo.js"></script>
	<!-- Stellar Parallax -->
	<script src="js/jquery.stellar.min.js"></script>
	<!-- Owl Slider -->
	<!-- // <script src="js/owl.carousel.min.js"></script> -->
	<!-- Date Picker -->
	<script src="js/bootstrap-datepicker.min.js"></script>
	<!-- CS Select -->
	<script src="js/classie.js"></script>
	<script src="js/selectFx.js"></script>
	<!-- Flexslider -->
	<script src="js/jquery.flexslider-min.js"></script>

	<script src="js/custom.js"></script>

</body>
</html>